<template>
  <view class="ui-multilevel-picker">
    <view class="ui-multilevel-header">
      <fui-search-bar ref="searchRef" radius="36" :paddingTb="22" :paddingLr="36" :isLeft="true" placeholder="请输入商品名称进行检索" @blur="search" @cancel="cancel">
      </fui-search-bar>
    </view>
    <view class="ui-multilevel-content">
      <scroll-view v-if="showCategory" class="ui-multilevel-list" scroll-y>
        <view class="ui-multilevel-item" :class="{'active': item.id === currentCategoryId}" v-for="item in categoryList" :key="item.id" @click="onChangeCategory(item)">
          <fui-text class="ui-multilevel-item__text" :text="item.name" size="28"></fui-text>
        </view>
      </scroll-view>
      <scroll-view class="ui-multilevel-list" scroll-y @scroll="onScroll">
        <fui-radio-group name="radio" v-model="checkedGoodsId">
          <fui-label class="ui-multilevel-item ui-multilevel-product" v-for="item in goodsList" :key="item.id">
            <fui-radio :value="item.id + ''" scaleRatio="0.8"></fui-radio>
            <image class="ui-multilevel-item__image" :src="item.image" mode="aspectFill"></image>
            <fui-text class="ui-multilevel-item__text" :text="item.name" size="28" color="#333"></fui-text>
          </fui-label>
        </fui-radio-group>
        <fui-loadmore :state="moreState"></fui-loadmore>
      </scroll-view>
    </view>
    <view class="ui-multilevel-footer">
      <fui-button class="ui-btn-primary_plain" text="取消" height="88rpx" radius="12rpx" @click="tab.navigateBack"></fui-button>
      <fui-button text="确定" height="88rpx" radius="12rpx" :disabled="!checkedGoodsId" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onShow } from '@dcloudio/uni-app'
import goodsApi from '@/api/goods'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const searchRef = ref(null)
const cancel = (e) => {
  showCategory.value = true
  getGoodsList()
}
const search = (e) => {
  showCategory.value = !e.detail.value
  queryParams.value.keyword = e.detail.value
  queryParams.value.pageNo = 1
  getGoodsList()
}

// 商品分类
const showCategory = ref(true)
const categoryList = computed(() => store.getters.productCategoryList.filter(item => item.parentId == 0) || [])
const currentCategoryId = ref('')
const onChangeCategory = (category) => {
  currentCategoryId.value = category.id
  queryParams.value.pageNo = 1
  queryParams.value.pageSize = 10
  getGoodsList()
}

// 商品列表
const moreState = ref(1)
const queryParams = ref({})
const checkedGoodsId = ref('')
const goodsList = ref([])
const getGoodsList = () => {
  try {
    queryParams.value.tabType = 0
    queryParams.value.categoryId = queryParams.value.keyword ? '' : currentCategoryId.value
    moreState.value = 2
    modal.loading('加载中...')
    goodsApi.getMallGoodsList(queryParams.value).then((res) => {
      modal.closeLoading()
      if (res.code === 0) {
        const newData = res.data.list.map(item => {
          const arr = item.sliderPicUrls || []
          return {
            ...item,
            image: arr[0]
          }
        })
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          goodsList.value = [...goodsList.value, ...newData]
        } else {
          goodsList.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.closeLoading()
  }
}

onLoad(option => {
  if (option.checkedId) {
    checkedGoodsId.value = option.checkedId
  }
})

onShow(() => {
  if (categoryList.value.length) {
    onChangeCategory(categoryList.value[0])
  }
})

const onScroll = (event) => {
  const scrollTop = event.detail.scrollTop
  const scrollHeight = event.detail.scrollHeight
  const delta = 800

  // 判断是否到达底部
  if (scrollTop + delta >= scrollHeight) {
    if (moreState.value == 1) {
      queryParams.value.pageNo++
      getGoodsList()
    }
  }
}

const handleSubmit = () => {
  uni.$emit('onCheckedGoods', checkedGoodsId.value)
  tab.navigateBack()
}
</script>

<style lang='scss' scoped>
.ui-multilevel-picker {
  display: flex;
  flex-direction: column;
  height: 100%;
  ::v-deep .fui-search__bar-wrap {
    .fui-search__bar-icon {
      position: absolute;
      top: 50%;
      right: 40rpx;
      margin-top: -20rpx;
      .fui-sbi__circle {
        border-color: var(--fui-color-primary);
      }
      .fui-sbi__line {
        background-color: var(--fui-color-primary);
      }
    }
    .fui-sbi__clear-wrap {
      display: none;
    }
  }
  .ui-multilevel-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .ui-multilevel-list {
      flex: 1;
      overflow: auto;
      border-left: 2rpx solid #f3f3f3;
      .ui-multilevel-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 36rpx;
        &.active {
          ::v-deep .ui-multilevel-item__text {
            .fui-text__content {
              color: var(--fui-color-primary) !important;
            }
          }
        }
        &.ui-multilevel-product {
          padding: 20rpx !important;
          .ui-multilevel-item__image {
            flex: 0 0 96rpx;
            width: 96rpx;
            height: 96rpx;
            background-color: #f8f8f8;
            border-radius: 8rpx;
            margin: 0 20rpx;
          }
          .ui-multilevel-item__text {
            flex: 1;
          }
        }
      }
      &:not(:last-child) {
        flex: 0 0 30%;
        background-color: #f8f8f8;
        .ui-multilevel-item.active {
          position: relative;
          background-color: #fff;
          font-weight: bold;
          color: var(--fui-color-primary);
          &::before {
            position: absolute;
            content: "";
            top: 50%;
            left: 0;
            width: 8rpx;
            height: 48rpx;
            background-color: var(--fui-color-primary);
            border-radius: 0 16rpx 16rpx 0;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  .ui-multilevel-footer {
    z-index: 10;
    display: flex;
    justify-content: space-between;
    box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
    background-color: #fff;
    padding: 24rpx 36rpx;
    .ui-btn-primary_plain {
      margin-right: 20rpx !important;
    }
  }
}
</style>